<template>
  <view class="goods-pond-bar">
    <view class="condition-container" v-if="conditionList.length > 0">
      <view class="goods-pond-condition">
        <scroll-view class="scroll-view_H" scroll-x="true">
          <view :key=" 'scroll-view_item_' + index " v-for="(item, index) in conditionList"
                @click="selectItem(index)"
                :class="selectedItemIndex == index ? 'scroll-view-item_H scroll-view-item_active' : 'scroll-view-item_H'">
            <view class="condition-item">
              <view class="condition-item-text">
                {{item.name}}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- <view class="goods-pond-bar-blank"></view> -->
    <view class="content-container">
      <view class="goods-pond-content">
        <view class="goods-pond-item" v-for="(item, index) in goodsList" :key="index">
          <GoodsCard :goodsInfo="item" :columns="columns" :showContent="[1,2,3,4,5]"></GoodsCard>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import GoodsCard from '@/components/bar/GoodsCard/index.vue'

import {ref} from 'vue'

const props = defineProps({
  stickyTop:{
    type: String,
    default: '0rpx'
  },
  conditionList:{
    type: Array,
    default: () => []
  },
  goodsList:{
    type: Array,
    default: () => []
  },
  columns:{
    type: Number,
    default: 1
  },
  showContent:{
    type: Array,
    default: () => ['1', '2', '3']
  }
});
const selectedItemIndex = ref(0)
const selectItem = (index:Number)=>{
  if(selectedItemIndex.value != index){
    selectedItemIndex.value = index
  }
}

const columnsStyleConfig = {
  1:{
    gridTemplateColumns: 'repeat(1, 1fr)',
    gridGap: '16rpx 0rpx',
  },
  2:{
    gridTemplateColumns: 'repeat(2, 1fr)',
    gridGap: '16rpx 14rpx',
  },
  3:{
    gridTemplateColumns: 'repeat(3, 1fr)',
    gridGap: '8rpx 7rpx',
  }
}
const gridStyle = columnsStyleConfig[props.columns]
const contentTop = props.conditionList.length > 0 ? '88rpx' : '0rpx';
</script>
<style lang="scss" scoped>
.goods-pond-bar{
  box-sizing: border-box;
  width: 750rpx;
  .condition-container{
	box-sizing: border-box;
    width: 100%;
    position: sticky;
	
	top: v-bind('props.stickyTop');
    z-index: 999;
    background-color: var(--back-color);
    .goods-pond-condition{
      width: 686rpx;
      margin-left: 32rpx
    }
  }
  .content-container{
	box-sizing: border-box;
    margin-top: 16rpx;
    width: 100%;
    .goods-pond-content{
      width: 686rpx;
      margin-left: 32rpx;
      display: grid;
      grid-template-columns: v-bind('gridStyle.gridTemplateColumns');
      grid-gap: v-bind('gridStyle.gridGap');
      .goods-pond-item{

      }
    }
  }
}
.goods-pond-condition{
  .scroll-view-item_H {

    display: inline-block;
    .condition-item{
      height: 88rpx;
      display: flex;
      align-items: center;
      .condition-item-text{
        //background-color: #007aff;
        padding: 24rpx;

        font-size: 28rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 40rpx;
        font-weight: 600;
      }
    }
  }
  .scroll-view_H {
    white-space: nowrap;
    width: 100%;
  }
  .scroll-view-item_active{
    .condition-item{
      height: 64rpx;
      display: flex;
      align-items: center;
      background-color: #FFFFFF;
      border-radius: 38rpx;
      .condition-item-text{
        padding: 24rpx;

        font-size: 28rpx;
        color: var(--back-color);
        text-align: center;
        line-height: 40rpx;
        font-weight: 600;
      }
    }
  }
}
</style>